<template>
  <div class="reg">
    <img class="logo" src="../assets/logo.png" alt="" />
    <input type="text" v-model="userName" placeholder="请输入用户名" />
    <input type="password" v-model="password" placeholder="请输入密码" />
    <button @click="regHandle">注册</button>
    <router-link :to="{name:'Login'}">已有账号我要登录</router-link>
    
  </div>
</template>
<script>
import { post } from "../utils/request";

export default {
  name: "Reg",
  data() {
    return {
      userName: "",
      password: "",
    };
  },
  methods: {
    changePage() {
      // 事件派发
      this.$eventBus.$emit("pagechange", "Login");
    },
    regHandle() {
      if (this.userName && this.password) {
        post("/api/v1/auth/reg", {
          userName: this.userName,
          password: this.password,
        }).then((res) => {
          if (res.code === "success") {
            sessionStorage.setItem("token", res.token);
            // alert("注册成功");
            this.$router.push({
              name:'Home'
            })
            this.$eventBus.$emit("pagechange", "User");
          } else {
            alert(res.message);
          }
        });
      } else {
        alert("请输入用户名和密码");
      }
    },
  },
};
</script>

<style scoped>
.reg {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.reg .logo {
  width: 70%;
}
.reg input {
  padding: 0.6rem 0rem;
  width: 80%;
  margin: 0.5rem;
}
.reg button {
  background-color: deeppink;
  padding: 0.8rem 1.8rem;
  color: white;
  width: 80%;
  border: none;
}
</style>
